@use "../../default" as theme;
.pf-Checkbox{
	flex-shrink:0;
	font-size: theme.$Checkbox-icon-size;
	color: theme.$Checkbox-primary-color;
	display:inline-flex;
	align-items:center;
	cursor:pointer;
	user-select:none;
	vertical-align: theme.$vertical-align;
	&:focus{
		outline:0;
	}
	&.pf--inactive{
		&:not(:hover):not(:focus){
			color: theme.$Checkbox-box-border-color !important;
		}
		.pf-Checkbox_icon{
			background:#fff;
		}
	}
	&.pf--active{
		.pf-Checkbox_tick{
			opacity:1;
			stroke-dashoffset:0;
		}
	}
	&.pf--indeterminate{
		.pf-Checkbox_cross{
			opacity:1;
			transform:rotate(0) scale(1);
		}
	}
	&.pf--disabled{
		color: theme.$Checkbox-box-border-color !important;
		cursor:not-allowed;
		&.pf--inactive{
			.pf-Checkbox_icon{
				background: theme.$Checkbox-box-disabled-color;
			}
		}
	}
}
.pf-Checkbox_icon{
	flex-shrink:0;
	display:flex;
	justify-content:center;
	align-items:center;
	width:1em;
	height:1em;
	background:currentColor;
	border:#{theme.$Checkbox-border-width} solid;
	border-radius: theme.$Checkbox-radius;
	svg{
		width:100%;
		height:100%;
		color:#fff;
	}
}
.pf-Checkbox_tick{
	opacity:0;
	fill:none;
	stroke-dashoffset:29.78334;
	stroke:#fff;
	stroke-width:3.12px;
	stroke-dasharray:29.78334;
	transition: theme.$Checkbox-transition;
	transition-property:stroke-dashoffset;
}
.pf-Checkbox_cross{
	opacity:0;
	fill:#fff;
	transform-origin:50% 50%;
	transform:rotate(-280deg) scale(0);
	transition: theme.$Checkbox-transition;
	transition-property:transform;
}
.pf-Checkbox_label{
	flex-shrink:0;
	margin-left: theme.$Checkbox-gap;
	color: theme.$Checkbox-color;
	font-size: theme.$Checkbox-content-size;
}